<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            canvas {
                background-image: url('2.png');
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>

        <script>
            // 获取画布，设置基本大小
            var canvas = document.querySelector('#canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = 243;
            canvas.height = 528;

            // 绘制一张漫画图片覆盖在真人钢铁侠上面
            var img = new Image();
            img.src = '1.png';
            img.onload = function () {
                ctx.drawImage(img, 0, 0, 243, 528);
            };

            canvas.addEventListener('mousemove', function (event) {
                if (isDown) {
                    //获取鼠标位置
                    let x = event.offsetX;
                    let y = event.offsetY;
                    //开始绘制路径，绘制小圆球
                    ctx.beginPath();
                    ctx.fillStyle = 'white';
                    ctx.arc(x, y, 20, Math.PI * 2, false);
                    ctx.fill();
                    ctx.closePath();
                    /*在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。*/
                    ctx.globalCompositeOperation = 'destination-out';
                }
            });

            // 定义变量 isDown，判断鼠标是否是一直按压着
            var isDown = false;
            canvas.addEventListener('mousedown', function () {
                isDown = true;
            });
            canvas.addEventListener('mouseup', function () {
                isDown = false;
            });
        </script>
    </body>
</html>
